<template>
	<view class="contactGroup">
		<view class="form-wrapper">
			<view class="item-wrapper" v-for="(item,index) in tagList" :key="index">
				<view class="info">
					<view class="title">
						{{ item.labelName }}
					</view>
					<view class="sort">
						排序号：{{ item.labelSort }}
					</view>
				</view>
				<view class="translate">
					<view class="item" @click.stop="remove(item)">
						<uni-icons type="trash-filled" size="20" class="icon" color="#5B5B5B"></uni-icons>
						<text>删除</text>
					</view>
					<view class="item" @click="edit(item)">
						<uni-icons type="compose" size="20" class="icon" color="#5B5B5B"></uni-icons>
						<text>编辑</text>
					</view>
				</view>
			</view>
			<view class="more-btn" @click="add">
				<uni-icons type="plusempty" size="18" class="icon" color="#F26022"></uni-icons>
				<text>添加标签</text>
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="popup-wrapper">
				<view class="title-wrapper">
					{{ id?'编辑':'新增' }}标签
				</view>
				<view class="form-item">
					<view class="label">
						标签名称
					</view>
					<view class="input-wrapper">
						<input type="text" v-model="name" maxlength="4" placeholder="请输入" class="input">
					</view>
				</view>
				<view class="form-item">
					<view class="label">
						标签排序
					</view>
					<view class="input-wrapper">
						<input type="number" v-model="sort" placeholder="请输入" class="input">
					</view>
				</view>
				<view class="btn-wrapper">
					<view class="btn cancel" @click="close">
						取消
					</view>
					<view class="btn" @click="submit">
						确定
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 提示窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="确定" title="请确认" :content="msgText" @confirm="dialogConfirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				name: '',
				sort: '',
				msgText: '',
			}
		},
		mounted() {
			//this.getStoreTypeData()
		},
		computed: {
			tagList() {
				return this.$store.state.tagList
			},
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		methods: {
			add() {
				if (this.tagList.length === 10) {
					uni.showToast({
						title: '最多添加10个标签',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.id = null;
				this.name = '';
				this.sort = this.tagList.length;
				this.$refs.popup.open('center');
			},
			edit(item) {
				this.name = item.labelName;
				this.sort = item.labelSort;
				this.id = item.id;
				this.$refs.popup.open('center');
			},
			async dialogConfirm() {
				const data = await this.$api.del('/app/pickuppoint/customer-label/remove', [this.id]);
				if (data.code === 200) {
					uni.showToast({
						title: "删除成功"
					})
					this.$store.commit('setTagList')
				}
			},
			remove(item) {
				let _this = this;
				this.id = item.id;
				this.msgText = `确定要删除标签：${item.labelName}吗？`
				this.$refs.alertDialog.open();
			},
			close() {
				this.$refs.popup.close();
			},
			async submit() {
				if (!this.name) {
					uni.showToast({
						title: "请输入标签名称",
						icon: "none"
					})
					return
				}
				if (!this.sort && this.sort != '0') {
					uni.showToast({
						title: "请输入标签排序",
						icon: "none"
					})
					return
				}
				let data;
				if (this.id) {
					data = await this.$api.put('/app/pickuppoint/customer-label', {
						pickupPointId: this.userInfo.pickupPointId,
						labelName: this.name,
						labelSort: this.sort,
						id: this.id
					});
				} else {
					data = await this.$api.post('/app/pickuppoint/customer-label', {
						pickupPointId: this.userInfo.pickupPointId,
						labelName: this.name,
						labelSort: this.sort
					});
				}
				if (data.code === 200) {
					uni.showToast({
						title: this.id ? "修改成功" : "新增成功"
					})
					this.$store.commit('setTagList')
					this.$refs.popup.close();
				}
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.contactGroup {
		height: 100%;
		overflow: auto;

		.form-wrapper {
			padding: 20upx;

			.item-wrapper {
				padding: 0 32upx;
				background-color: #ffffff;
				margin-bottom: 20upx;
				overflow: hidden;
				display: flex;
				height: 146upx;
				border-radius: 16upx;
				align-items: center;

				.info {
					flex: 1;

					.title {
						font-size: 36upx;
						color: #050505;
						line-height: 36upx;
					}

					.sort {
						line-height: 28upx;
						margin-top: 20upx;
						font-size: 28upx;
						color: #777777;
					}
				}

				.translate {
					display: flex;
					align-items: center;

					.item {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						font-size: 30upx;
						color: #5B5B5B;
						height: 30upx;

						&:first-child {
							padding-right: 30upx;
							border-right: 2upx solid #cccccc;
						}

						&:last-child {
							padding-left: 30upx;
						}

						.icon {
							margin-right: 5upx;
							position: relative;
							top: 2upx;
						}
					}
				}

			}

			.more-btn {
				width: 376upx;
				height: 76upx;
				color: #F26022;
				border: 2upx solid #F26022;
				border-radius: 40upx;
				background-color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 50upx auto;
				transition: .15s linear;

				.icon {
					margin-right: 10upx;
				}

				&:active {
					background-color: #f1f1f1;
				}
			}
		}

		.popup-wrapper {
			width: 600upx;
			background-color: #ffffff;
			border-radius: 20upx;
			min-height: 300upx;
			overflow: hidden;

			.title-wrapper {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 32upx;
				font-size: 36upx;
				color: #2B2B2B;
			}

			.form-item {
				margin: 0 44upx;
				height: 100upx;
				display: flex;
				align-items: center;
				border-bottom: 2upx solid #f9f9f9;

				.label {
					font-size: 32upx;
					color: #5B5B5B;
				}

				.input-wrapper {
					flex: 1;

					.input {
						width: 100%;
						text-align: right;
					}
				}
			}

			.btn-wrapper {
				height: 150upx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 40upx;

				.btn {
					width: 260upx;
					height: 76upx;
					border-radius: 40upx;
					background-color: #F26022;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: .15s linear;

					&:active {
						background-color: #F2602266;
					}

					&.cancel {
						box-sizing: border-box;
						background-color: #ffffff;
						border: 2upx solid #F26022;
						margin-right: 40upx;
						color: #F26022;

						&:active {
							background-color: #F2F4FA77;
						}
					}
				}
			}
		}
	}
</style>